<template>
  <div id="app" style="height: 1800px;background-color: rgba(245,245,245,0.94)">
    <div class="nav">
      <div style="width: 100%;height: 60px;position: fixed;background-color: white">
        <div style="width: 1350px;height: 50px;background-color: white;margin: auto;">
          <div style="float: left;margin-top: 10px">
            <img src="../assets/weibo_logo.jpg" style="width: 90px;height: 30px" alt="">
          </div>
          <div style="float: left;margin-left: 10px;margin-top: 10px">
            <el-input placeholder="请输入内容" v-model="mix" style="width: 200px;" class="input-with-select">
              <el-button slot="append" size="small"  @click="toSelect()" icon="el-icon-search"></el-button>
            </el-input>
          </div>

          <div class="icon_all" style="float: left;width: 600px;height: 50px;margin-left: 66px;margin-top: 10px">
            <div class="icon_list" style="font-size: 30px"><i  class="el-icon-house"></i></div>
            <div class="icon_list" style="font-size: 30px"><i  class="el-icon-video-camera"></i></div>
            <div class="icon_list" style="font-size: 30px"><i  class="el-icon-cpu"></i></div>
            <div class="icon_list" style="font-size: 30px"><i  class="el-icon-message"></i></div>
            <div class="icon_list" style="font-size: 30px"><i  class="el-icon-user"></i></div>
          </div>

          <div style="float: right;margin-top: 10px;margin-right: 50px">
            <div v-if="token==null">
              <el-button style="background-color: #ff8200" type="warning" size="medium" round @click="LoginFormVisible = true">登录</el-button>
              <el-button  type="" size="medium" round @click="RegisterFormVisible = true">注册</el-button>
            </div>
            <div v-else>
              <span>{{token}}</span>|
              <span @click="exit()"><a href="">退出</a></span>
            </div>
          </div>
          <!--登录页面-->
          <el-dialog title="登录界面"  :append-to-body='true' :visible.sync="LoginFormVisible" width="30%" center>
            <el-form :model="User" status-icon :rules="rules" ref="ruleForm" >
              <el-form-item label="用户账号：" prop="username" :label-width="formLabelWidth">
                <el-input style="width: 300px" v-model="User.username" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="用户密码："prop="password" :label-width="formLabelWidth">
                <el-input style="width: 300px" type="password" v-model="User.password" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="margin-left: 50px">
              <el-button style="width: 100px" @click="LoginFormVisible = false">取 消</el-button>
              <el-button style="width: 100px" type="primary" @click="submitForm('ruleForm')">登 录</el-button>
            </div>
          </el-dialog>
          <!--注册页面-->
          <el-dialog title="注册界面"  :append-to-body='true' :visible.sync="RegisterFormVisible" width="30%" center>
            <el-form :model="People" status-icon :rules="rules" ref="ruleForm1" >
              <el-form-item label="输入账号：" prop="username" :label-width="formLabelWidth">
                <el-input style="width: 300px" v-model="People.username" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="输入密码：" prop="password" :label-width="formLabelWidth">
                <el-input type="password" style="width: 300px" v-model="People.password" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="margin-left: 50px">
              <el-button style="width: 100px" @click="RegisterFormVisible = false">取 消</el-button>
              <el-button style="width: 100px" type="primary" @click="RegisterForm('ruleForm1')">注 册</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
    <div class="main_content"
         style="float: left;width: 1125px;height: 1000px;background-color: rgba(245,245,245,0.94);margin-left: 200px;margin-top: 70px">

      <!--left-->
      <div class="left_content" style="float: left;height: 650px;width: 180px;background-color: white;position: fixed">
        <div style="height: 200px;width: 120px;margin: auto;padding-top: 10px">
          <div class="left_list">
            <i class="el-icon-sunny" style="margin-right: 10px"></i>
            <span>热门微博</span>
          </div>
          <div class="left_list">
            <i class="el-icon-odometer" style="margin-right: 10px"></i>
            <span>热门榜单</span>
          </div>
          <div class="left_list">
            <i class="el-icon-chat-line-round" style="margin-right: 10px"></i>
            <span>话题榜</span>
          </div>
          <div class="left_list">
            <i class="el-icon-search" style="margin-right: 10px"></i>
            <span>热搜榜</span>
          </div>
        </div>
      </div>
      <!--main-->
      <div class="main_content content"
           style="margin-left: 190px;float: left;width: 658px;height: 700px;background-color: rgba(245,245,245,0.94);">
        <div style="width: 658px;height: 35px;background-color: white;padding-top: 10px;">
          <span class="font_list"><a href=""><router-link :to="{name:'Top'}">头条</router-link></a></span>
          <span class="font_list"><a href=""><router-link :to="{name:'Video'}">视频</router-link></a></span>
          <span class="font_list"><a href=""><router-link :to="{name:'Happy'}">搞笑</router-link></a></span>
          <span class="font_list"><a href=""><router-link :to="{name:'Society'}">社会</router-link></a></span>
          <span class="font_list"><a href=""><router-link :to="{name:'Fashion'}">时尚</router-link></a></span>
        </div>
        <div class="router_view">
          <router-view/>
        </div>
      </div>
      <!--right-->
      <div class="right_content"
           style="float: right;width: 265px;height: 900px;background-color: rgba(245,245,245,0.94);">
        <!--top-->
        <div class="hot_content"
             style="width: 250px;padding-left: 10px;padding-right: 10px;height: 500px;padding-top:10px;background-color: white;">
          <div style="width: 250px;height: 40px">
            <!--logo-->
            <div style="float: left">
              <img src="../assets/hot_logo.jpg" style="width: 30px;height: 30px;border-radius: 20px" alt="">
            </div>
            <div style="float: left;margin-left: 10px">
              <span style="font-size: 22px">微博</span>
            </div>
            <div style="float: right;margin-top: 5px">
              <span style="color: gray;font-weight: bold;font-size: 17px">热搜榜</span>
            </div>
          </div>
          <hr style="height:1px;color:gray;background-color:rgba(228,228,228,0.94);"/>
          <div style="width: 250px;height: 500px;">
            <div class="hot_list1" style="margin-top: 5px">
              <span style="color: red">1</span>
              <span style="font-size: 14px">党的十九届六中全会精神</span>
              <span style="font-size: 10px">980万</span>
            </div>
            <div class="hot_list">
              <span style="color: orange">2</span>
              <span>感冒吃消炎药可能没用</span>
              <span style="font-size: 10px">880万</span>
            </div>
            <div class="hot_list">
              <span style="color: rgba(245,221,111,0.94)">3</span>
              <span>四年前的请假条</span>
              <span style="font-size: 10px">780万</span>
            </div>
            <div class="hot_list">
              <span style="color: gray">4</span>
              <span>春节放假</span>
              <span style="font-size: 10px">680万</span>
            </div>
            <div class="hot_list">
              <span style="color: gray">5</span>
              <span>湖南科技职业学院</span>
              <span style="font-size: 10px">550万</span>
            </div>
            <div class="hot_list">
              <span style="color: gray">6</span>
              <span>中央经济工作会议举行</span>
              <span style="font-size: 10px">440万</span>
            </div>
            <div class="hot_list">
              <span style="color: gray">7</span>
              <span>申论EDG</span>
              <span style="font-size: 10px">330万</span>
            </div>
            <div class="hot_list">
              <span style="color: gray">8</span>
              <span>人民日报评张同学</span>
              <span style="font-size: 10px">250万</span>
            </div>
            <div class="hot_list">
              <span style="color: gray">9</span>
              <span class="test">宋亚轩 TMEA腾讯音乐娱乐盛典</span>
              <span style="font-size: 10px">200万</span>
            </div>
            <div class="hot_list">
              <span style="color: gray">10</span>
              <span>江苏申论</span>
              <span style="font-size: 10px">150万</span>
            </div>
          </div>
        </div>
        <!--bottom-->
        <div class="bottom_content"
             style="margin-top: 20px;width: 265px;height: 300px;background-color: rgba(245,245,245,0.94)">
          <div class="wbpro-side-copy-inner">
            <div class="scale">
              <div class="CopyRight_item_B5tHx">
                <div class="woo-box-flex woo-box-alignCenter CopyRight_title_SBQ4K"><i
                  class="woo-font woo-font--help CopyRight_icon_1uc9j"></i>
                  <div>帮助中心</div>
                </div>
                <div class="woo-box-flex woo-box-justifyBetween CopyRight_content_3NVLX"><a
                  href="https://kefu.weibo.com/?cs_source=2" target="_blank" class=""> 微博客服 4000-960-960 </a><a
                  href="https://kefu.weibo.com/selfservice?bottomnav=1&amp;wvr=6" target="_blank"
                  class="CopyRight_contentItem_2cb23"> 自助服务中心 </a><a
                  href="https://kefu.weibo.com/allfaq?bottomnav=1&amp;wvr=6" target="_blank"
                  class="CopyRight_contentItem_2cb23"> 常见问题 </a></div>
              </div>
              <div class="CopyRight_item_B5tHx">
                <div class="woo-box-flex woo-box-alignCenter CopyRight_title_SBQ4K"><i
                  class="woo-font woo-font--cooperation CopyRight_icon_1uc9j"></i>
                  <div>合作&amp;服务</div>
                </div>
                <div class="woo-box-flex woo-box-justifyBetween CopyRight_content_3NVLX"><a
                  href="https://marketing.hd.weibo.com/?fr=C003001_P001" target="_blank" class=""> 微博营销 </a><span
                  class="CopyRight_contentItem_2cb23">合作热线 4000-980-980</span><a
                  href="https://open.weibo.com/?bottomnav=1&amp;wvr=6" target="_blank"
                  class="CopyRight_contentItem_2cb23"> 开放平台 </a>
                  <div class="link woo-pop-wrap"><span class="woo-pop-ctrl"><span class="CopyRight_contentItem_2cb23"> 更多 </span></span>
                    <!----></div>
                </div>
              </div>
              <div class="CopyRight_item_B5tHx">
                <div class="woo-box-flex woo-box-alignCenter CopyRight_title_SBQ4K"><i
                  class="woo-font woo-font--reportV2 CopyRight_icon_1uc9j"></i>
                  <div>举报中心</div>
                </div>
                <div class="woo-box-flex woo-box-justifyBetween CopyRight_content_3NVLX"><span class="">违规投诉 010-60618076</span><a
                  href="https://service.account.weibo.com/?bottomnav=1&amp;wvr=6" target="_blank"
                  class="CopyRight_contentItem_2cb23"> 处理大厅 </a><a href="https://weibo.com/aj/static/report.html?_wv=6"
                                                                   target="_blank" class="CopyRight_contentItem_2cb23">
                  舞弊举报 </a>
                  <div class="link woo-pop-wrap"><span class="woo-pop-ctrl"><span class="CopyRight_contentItem_2cb23"> 更多 </span></span>
                    <!----></div>
                </div>
              </div>
              <div class="CopyRight_item_B5tHx">
                <div class="woo-box-flex woo-box-alignCenter CopyRight_title_SBQ4K"><i
                  class="woo-font woo-font--about CopyRight_icon_1uc9j"></i>
                  <div>关于微博</div>
                </div>
                <div class="woo-box-flex woo-box-justifyBetween CopyRight_content_3NVLX"><a href="http://ir.weibo.com/"
                                                                                            target="_blank" class="">
                  About Weibo </a>
                  <div class="link woo-pop-wrap"><span class="woo-pop-ctrl"><span class="CopyRight_contentItem_2cb23"> 客户端下载 </span></span>
                    <!----></div>
                  <a href="https://career.sina.com.cn/?bottomnav=1&amp;wvr=6" target="_blank"
                     class="CopyRight_contentItem_2cb23"> 微博招聘 </a>
                  <div class="link woo-pop-wrap"><span class="woo-pop-ctrl"><span class="CopyRight_contentItem_2cb23"> 网站备案信息 </span></span>
                    <!----></div>
                </div>
              </div>
              <div class="CopyRight_item_B5tHx CopyRight_content_3NVLX CopyRight_cricon_3Apzk">
                <div class="logo Logo_wrap_1GQA1" tabindex="0" data-focus-visible="true">

                </div>
                <span class="CopyRight_cricon_3Apzk"> Copyright © 2009-2021 <a
                  href="https://weibo.com/aj/static/business_license.html" target="_blank">WEIBO</a></span></div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: "Index",
    data(){
      return{
        token:'',
        User: {},
        People:{},
        mix:'',
        LoginFormVisible: false,//登录页面
        RegisterFormVisible: false,//修改页面
        formLabelWidth: '100px',
        rules:{
          username:[
            { required: true, message: '请输入账号名称', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ]
        }
      }
    },
    methods:{
      /*退出*/
      exit(){
        localStorage.removeItem("name")
        location. reload()
      },
      /*token*/
      findToken(){
        this.token = localStorage.getItem("name")
      },
      /*登录*/
      submitForm(formName) {
        this.$refs[formName].validate(async  (valid) => {
          if (valid) {
            if(!this.User.username){alert('请输入账号');return false}
            if(!this.User.password){alert('请输入密码');return false}
            let _this = this
            this.$axios.post("http://localhost:8050/user/login",this.User).then(function (res) {
              //清空本次保存数据
              if(res.data!=-1){
                localStorage.setItem("name",_this.User.username)
                _this.$options.methods.findToken();
                alert("登录成功！")
                _this.User = {};
                _this.LoginFormVisible =false
                location. reload()
              }else {
                alert("账号或密码错误！");
                _this.User = {};
              }
            }).catch(function (err) {
              localStorage.removeItem('name')
              alert("登陆失败！");
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      /*注册*/
      RegisterForm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(!this.People.username){alert('请输入用户名称');return false}
            if(!this.People.password){alert('请输入用户密码');return false}
            console.log(this.People)
            let _this = this
            this.$axios.post("http://localhost:8050/user/setUser",this.People).then(function () {
              //清空本次保存数据
              alert("注册成功！请重新登录！")
              _this.People = {};
              location.reload()
            }).catch(function (err) {
              // alert("用户信息添加失败，请稍后再试")
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      toSelect(){
        this.$router.push({ name: 'Select', params: { title: this.mix }});
      },
    },
    created() {
      this.findToken();
    },

  }
</script>

<style scoped>
  .icon_list{
    float: left;
    margin-left: 66px;
  }
  .icon_list i:hover{
    color: orange;
    background-color: gainsboro;
  }

  .router_view{

  }
  .hot_list span {
    font-size: 14px;

  }

  .hot_list {
    margin-top: 20px;
  }


  .left_list {
    margin-top: 20px;
  }

  .left_list i {
    font-size: 20px;
  }

  .left_list:hover {
    color: orange;
  }

  .main_content a:hover {
    color: orange;
    font-weight: bold;
  }

  .font_list {
    font-size: 15px;
    margin-left: 79px;
  }

  a {
    text-decoration: none;
    color: black;
  }


  .wbpro-side-copy-inner {
    height: 100%;
  }

  .wbpro-side-copy-inner {
    position: relative;
  }

  .scale {
    position: absolute;
    top: 0;
    left: 50%;
    width: 330px;
    margin: 0 0 0 -165px;
    transform: scale(.85);
    font-size: 10px;
  }

  .CopyRight_item_B5tHx {
    margin-left: 20px;

  }

  .CopyRight_cricon_3Apzk {
    margin-top: 8px;
  }

  .CopyRight_content_3NVLX {
    font-size: 10px;
    line-height: 20px;
  }

  .CopyRight_content_3NVLX {
    margin-top: 3px;
    font-size: 10px;
    line-height: 18px;
  }

  .CopyRight_title_SBQ4K {
    font-size: 10px;
    line-height: 18px;
    color: #606060;
  }

  .woo-box-alignCenter {
    align-items: center;
    -webkit-box-align: center;
  }

  .CopyRight_content_3NVLX a {
    cursor: pointer;
  }

  .CopyRight_contentItem_2cb23 {
    margin-left: 12px;
  }

  .CopyRight_cricon_3Apzk {
    margin-top: 8px;
  }

  .link {
    cursor: pointer;
  }

  .woo-pop-wrap {
    display: inline-block;
    position: relative;
  }
</style>
